
/* Because grid system uses em as their base unit, the size of the layout depends
on font size. Please use percentages if you want site to "zoom" in IE6 also (and
other ancient browsers. Please note that you should use percentages only when
they are integer (IE is not good in maths).

Total width should be divisible with 12 (because of twelve colums).
Page width is set by changing body font (column size = 5 x body font size).

Here is reference table for setting page width (use percentages if you need to
support text resizing in IE6):

Layout px	Font%		Font px		Grid px
1080px				18px		90px
1020px		(106.25%)	17px		85px
960px		100%		16px		80px
900px		(93.75%)	15px		75px
840px		(87.5%)		14px		70px
780px		(81.25%)	13px		65px
720px		75%		12px		60px
660px		(68.75%)	11px		55px
600px		(62.5%)		10px		50px

This is how you can achieve any width (it should be dibisible with 12):

Desired page width / 12 / 5 = body font size in px

*/

body {
	font-size:100%; /* This sets layout width!!! */
	text-align: center;
	margin-left: 1em;
	margin-right: 1em;
}

p, h1, h2, h3, h4, h5, h6, ul { /* Set basic paddings for all items that need it*/
	padding-left: 20px;
	padding-right: 20px;
}

p, li {
	letter-spacing: normal;
	word-spacing: normal;
	line-height: 1.4em;
}

.container {
	width: 60.5em;
	/*  Width can be 60 and left padding can be removed if you use px as body font size (disables resizing in IE6)*/
	padding-left: 0.5em;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	text-align: left;
	/*
	background-image: url(../img/grid-bg.gif);
	background-position: 0.5em 0;
	*/
}


.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12{
	float: left;
	display: inline;
	overflow: hidden;
}

.g1 {width: 5em;}
.g2 {width: 10em;}
.g3 {width: 15em;}
.g4 {width: 20em;}
.g5 {width: 25em;}
.g6 {width: 30em;}
.g7 {width: 35em;}
.g8 {width: 40em;}
.g9 {width: 45em;}
.g10 {width: 50em;}
.g11 {width: 55em;}
.g12 {width: 60em;}

.left1 {margin-left: 5em;}
.left2 {margin-left: 10em;}
.left3 {margin-left: 15em;}
.left4 {margin-left: 20em;}
.left5 {margin-left: 25em;}
.left6 {margin-left: 30em;}
.left7 {margin-left: 35em;}
.left8 {margin-left: 40em;}
.left9 {margin-left: 45em;}
.left10 {margin-left: 50em;}
.left11 {margin-left: 55em;}

.right1 {margin-right: 5em;}
.right2 {margin-right: 10em;}
.right3 {margin-right: 15em;}
.right4 {margin-right: 20em;}
.right5 {margin-right: 25em;}
.right6 {margin-right: 30em;}
.right7 {margin-right: 35em;}
.right8 {margin-right: 40em;}
.right9 {margin-right: 45em;}
.right10 {margin-right: 50em;}
.right11 {margin-right: 55em;}

.clear {clear: both;}